<template>
  <div>
    <div  class="box-container">
      <div class="header-title">
        <br>今日 需要复习的：
      </div>

      <template v-for="item in reviewList">
          <el-card class="box-card" :key="item.planId">
            <div slot="header" class="clearfix">
              <span class="text-title">{{ item.title }}</span>
              <el-button style="float: right;" @click="finishClike(item.planId)" type="success" size="mini">完成</el-button>
              <el-button class="box-button" @click="editDetail(item.planId)" type="text">
                <i class="fa fa-edit"/>编辑</el-button>
                <el-button class="box-button" @click="seeDetail(item.planId)" type="text">
                <i class="fa fa-eye"/>查看</el-button>
            </div>
            <div class="text text-item">
              <strong>提示问题：{{item.question}}</strong>
              <!-- 提示问题列表 -->
              <ol>
                <template v-for="(item,index) in item.questionList">
                  <!-- 问题内容 -->
                  <li :key="index"><el-tag class="d2-mb-5" style="color: black;">{{ item.question }}</el-tag></li>
                </template>
              </ol>
            </div>
            <div>
              <el-collapse v-model="item.activeNames" accordion>
                <el-collapse-item title="参考答案" name="1">
                  <div class="text text-item" v-html="item.detail">
                    {{ item.detail }}
                  </div>
                </el-collapse-item>
              </el-collapse>
            </div>
            <div>
              上次复习时间：{{item.reviewTime}}
            </div>
            <!-- 标签部分-->
            <div>
              <el-tag :key="tag" v-for="tag in item.dynamicTags">
                {{tag}}
              </el-tag>
            </div>
          </el-card>
        </template>
      <div style="height:200px"></div>
    </div>
    <show-update ref="show" v-if="showDetail" @refresh="needReview"></show-update>
    <select-effect ref="effect" v-if="selectEffect" @refresh="needReview"></select-effect>
  </div>
</template>

<script>
import ShowUpdate from '../components/ShowUpdate'
import SelectEffect from "../components/SelectEffect";
import { needReviews, finish } from '@api/plan.api.fetch'
import dayjs from 'dayjs'
export default {
  name: 'needReviews',
  data () {
    return {
      showDetail: false,
      selectEffect:false,
      reviewList: []
    }
  },
  components: {
    SelectEffect,
    ShowUpdate
  },
  mounted () {
    this.needReview()
  },
  methods: {
    needReview () {
      needReviews().then(res => {
        this.reviewList = res.data
        this.reviewList.forEach(element => {
          element.reviewTime = dayjs(element.lastTime).format('YYYY-M-D HH:mm:ss')
          element.activeNames = ''
        })
      })
    },
    seeDetail (id) {
      this.showDetail = true
      this.$nextTick(() => {
        this.$refs['show'].isEdit = false
        this.$refs['show'].init(id)
      })
    },
    editDetail (id) {
      this.showDetail = true
      this.$nextTick(() => {
        this.$refs['show'].isEdit = true
        this.$refs['show'].init(id)
      })
    },
    finishClike (id) {
      this.selectEffect = true
      this.$nextTick(() => {
        this.$refs['effect'].init(id)
      })
      // finish({ planId: id }).then(res => {
      //   this.$message.success('恭喜你完成一次复习')
      //   this.needReview()
      // })
    }
  }
}
</script>

<style>

  .header-title {
    font-size: 60px;
    color: #7f7f7f;
    font-family: 'Lucida Handwriting',serif;
    text-align: center;
  }
  .box-container{
    display: flex;
    justify-content: space-around;
    flex-direction: column;
    align-items: center;
    background-image: url('../../home/image/background-wenli1.jpeg');
  }
  .box-button{
    float: right;
    padding: 5px 0;
    margin: 0 3px 0;
  }
  .text {
    font-size: 14px;
  }
  .text-title {
    font-size: 18px;
  }

  .text-item {
    margin-bottom: 18px;
  }

  .box-card {
    width: 580px;
    margin-top: 20px;
  }
</style>
